<template>
  <div>
    <PageTools>
      <!-- <template #left /> -->
      <template #right>
        <el-button
          type="primary"
          size="small"
          @click="showDialog('1', '0')"
        >添加权限</el-button>
      </template>
    </PageTools>
    <div class="table">
      <el-table border :data="list" row-key="id">
        <el-table-column label="名称" prop="name" />
        <el-table-column label="标识" prop="code" align="center" />
        <el-table-column label="描述" prop="description" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              type="text"
              @click="showDialog('2', scope.row.id)"
            >添加</el-button>
            <el-button type="text" @click="edit(scope.row.id)">编辑</el-button>
            <el-button
              type="text"
              @click="deleteFn(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <PermissionDialog
      ref="PermissionDialogRef"
      :visible="visible"
      :type="type"
      :pid="pid"
      @close="close"
      @update="fetchPermissionList"
    />
  </div>
</template>

<script>
import { getPermissionList, delPermission } from '@/api'
import findSon from '@/utils/findSon'
import PermissionDialog from './components/permissionDialog.vue'
export default {
  components: {
    PermissionDialog
  },
  data() {
    return {
      // 列表数据
      list: [],
      visible: false,
      type: '',
      pid: ''
    }
  },
  created() {
    this.fetchPermissionList()
  },
  methods: {
    // 获取权限列表
    async fetchPermissionList() {
      const { data } = await getPermissionList()
      // console.log(data)
      this.list = findSon(data, '0')
      console.log(this.list)
    },
    close() {
      this.visible = false
    },
    showDialog(type, pid) {
      this.visible = true
      this.type = type
      this.pid = pid
    },
    // 编辑事件
    edit(id) {
      this.visible = true
      this.$refs.PermissionDialogRef.getDetail(id)
    },
    // 删除事件
    deleteFn(id) {
      this.$confirm('此操作将永久删除该权限点, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 2. 调用删除接口
        await delPermission(id)
        // 3. 提示用户
        this.$message.success('删除权限点成功!')
        // 4. 刷新列表
        this.fetchPermissionList()
      }).catch(() => {})
    }
  }
}
</script>

<style>
.table {
  padding: 0px 20px;
}
</style>
